<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            border: 1px solid;
        }
    </style>
</head>

<body>

    <input type="button" value="haha" id="button">
    <svg width="200" height="100" id="svg">



    </svg>
    <input type="text" id="text">
    <input type="button" value="提交" id="submit">
    <p id="p_p"></p>



    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="../random_number.js"></script>
    <script>
        submit.disabled = true;
        button.onclick = function () {
            // console.log(data);
            let data = Mock.mock({
                "list|1": [{
                    'lower': '@character(lower)',
                    'numebr': '@character(number)',
                    'upper': '@character(upper)',
                    'lowers': '@character(lower)',

                }]
            }).list;
            console.log(data);
            svg.innerHTML = `
            <text x=${random(10,30)} y=${random(50,70)} font-size="${random(20,30)}" font-weight="bold" rotate="${random(-30,30)}" textlength="100" fill='rgb(${random(255)},${random(255)},${random(255)})'>${data.lower}</text>
            <text x=${random(50,80)} y=${random(50,70)} font-size="${random(20,30)}" font-weight="bold" rotate="${random(-30,30)}" textlength="100" fill='rgb(${random(255)},${random(255)},${random(255)})'>${data.upper}</text>
            <text x=${random(100,130)} y=${random(50,70)} font-size="${random(20,30)}" font-weight="bold" rotate="${random(-30,30)}" textlength="100" fill='rgb(${random(255)},${random(255)},${random(255)})'>${data.numebr}</text>
            <text x=${random(140,190)} y=${random(50,70)} font-size="${random(20,30)}" font-weight="bold" rotate="${random(-30,30)}" textlength="100" fill='rgb(${random(255)},${random(255)},${random(255)})'>${data.lowers}</text>
           
            `
            let word = `${data.lower + data.upper + data.numebr + data.lowers}`
            console.log(word);
            submit.disabled = false;
            submit.onclick = function () {
                if (word.toUpperCase() == text.value.toUpperCase().trim()) {
                    p_p.innerText = `验证成功`
                    alert('验证成功')
                } else {
                    p_p.innerText = `验证失败`
                    alert('验证失败')
                }
            }
        }
    </script>

</body>

</html>